<template>
  <div id="jvs-message-box" class="jvs-message-box" :class="[position]" :style="{ zIndex }">
    <img class="icon" :src="uploadLoading">
    <div class="message-text">
      {{ message }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {

  watch,
  computed,
  onMounted,
  watchEffect
} from 'vue'

import uploadLoading from '@/assets/images/upload_loading.gif'
import useCommonStore from '@/store/common.js'
const commonStore = useCommonStore()

const props = defineProps({
  message: {
    type: String,
    defalut: ''
  },
  position: {
    type: String,
    default: 'top'
  },
  type: {
    type: String,
    default: 'success'
  },
  zIndex: {
    type: [String, Number],
    default: 9999
  },
  remove: Function,
  callBack: Function
})

onMounted(() => {

})
const getList = computed(() => {
  return commonStore.downFileList
})
const isAllFinish = computed(() => {
  let num = 0
  getList.value.forEach((item => {
    if (item.isFinish) {
      num += 1
    }
  }))
  return num >= getList.value.length
})
watch(() => isAllFinish.value, (newV) => {
  if (newV) {
    if (props.remove) props.remove()
  }
})
watchEffect(() => {
  (getList.value, isAllFinish.value)
})

</script>
<style lang="scss" scoped>
.jvs-message-box {
  position: absolute;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 172px;
  padding: 0px 16px;
  background: #E8F0FF;
  box-shadow: 0px 4px 20px 0px rgba(54, 59, 76, 0.15);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #1E6FFF;

  .icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  .message-text {
    font-size: 14px;
    color: #363b4c;
  }
}

.top {
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
}

.top-left {
  top: 56px;
  left: 56px;
}

.top-right {
  top: 56px;
  right: 56px;
}

.bottom {
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-left {
  bottom: 56px;
  left: 56px;
}

.bottom-right {
  bottom: 56px;
  right: 56px;
}
</style>
